import { Flex, Radio, Table } from "antd"
import { useState } from "react"
import { Access } from '@umijs/max'
import { CouponSelectModal } from "@/components/MallCouponSelect"
import { SelectModal } from '@/components/GoodsSelect'
import { GoodsCouponSelectModal } from '@/components/GoodsCouponSelect'
import { PointsGoodsType } from "@/constants/enums/goods"

type Data = {
  type: PointsGoodsType
  data?: {
    id: string
    name: string
    content: string
    inventory: number
  }
}
type DayPointsProps = {
  value?: Data
  onChange?: (value?: Data) => void
  disabled?: boolean
}

const GoodInfo: React.FC<DayPointsProps>  = props => {
  const [chargeCouponOpen, setChargeCouponOpen] = useState(false)
  const [goodsOpen, setGoodsOpen] = useState(false)
  const [goodsCouponOpen, setGoodsCouponOpen] = useState(false)

  const onTypeChange = (val: PointsGoodsType) => {
    props.onChange?.({
      type: val,
      data: undefined,
    })
  }
  const onChargeCouponClose = () => {
    setChargeCouponOpen(false)
  }
  const onChargeCouponSelected = (val?: CouponSelector.Value[]) => {
    if (val?.length) {
      props.onChange?.({
        type: props.value!.type,
        data: val[0] as any,
      })
    }
  }
  const onGoodsCouponClose = () => {
    setGoodsCouponOpen(false)
  }
  const onGoodsCouponSelected = (val?: GoodsCouponSelector.Value[]) => {
    if (val?.length) {
      props.onChange?.({
        type: props.value!.type,
        data: val[0] as any,
      })
    }
  }
  const onGoodsClose = () => {
    setGoodsOpen(false)
  }
  const onGoodsSelected = (val?: GoodsSelector.Value[]) => {
    if (val?.length) {
      props.onChange?.({
        type: props.value!.type,
        data: val[0] as any,
      })
    }
  }

  const chargeCouponColumns: any = [
    {title: '优惠券', dataIndex: 'name'},
    {title: '优惠内容', dataIndex: 'content'},
    {title: '可用库存', dataIndex: 'inventory'},
  ]
  if (!props.disabled) {
    chargeCouponColumns.push({
      title: '操作', key: 'operation', width: 100, render: () => {
        return <a onClick={() => setChargeCouponOpen(true)}>修改</a>
      }
    })
  }
  const goodsCouponColumns: any = [
    {title: '优惠券', dataIndex: 'name'},
    {title: '优惠内容', dataIndex: 'content'},
    {title: '可用库存', dataIndex: 'inventory'},
  ]
  if (!props.disabled) {
    goodsCouponColumns.push({
      title: '操作', key: 'operation', width: 100, render: () => {
        return <a onClick={() => setGoodsCouponOpen(true)}>修改</a>
      }
    })
  }
  const goodsColumns: any = [
    {title: '商品名称', dataIndex: 'name'},
    {title: '可用库存', dataIndex: 'inventory'},
  ]
  if (!props.disabled) {
    goodsColumns.push({
      title: '操作', key: 'operation', width: 100, render: () => {
        return <a onClick={() => setGoodsOpen(true)}>修改</a>
      }
    })
  }
  
  return <Flex vertical gap={8}>
    <Flex align="center" style={{height: 32}}>
      <Radio.Group value={props.value?.type} disabled={props.disabled} onChange={({target}) => onTypeChange(target.value)}>
        <Radio value={PointsGoodsType.充电优惠券}>充电优惠券</Radio>
        <Radio value={PointsGoodsType.优惠券}>商品优惠券</Radio>
        <Radio value={PointsGoodsType.商品}>商品</Radio>
      </Radio.Group>
    </Flex>
    <Access accessible={props.value?.type === PointsGoodsType.优惠券}>
      <Access accessible={!props.value?.data}><a onClick={() => setGoodsCouponOpen(true)}>添加商品优惠券</a></Access>
      <Access accessible={!!props.value?.data}>
        <Table
          rowKey={'couponId'}
          size="small"
          style={{width: 500}}
          columns={goodsCouponColumns}
          dataSource={props.value?.data ? [props.value.data] : []}
          pagination={false}
        />
      </Access>
    </Access>
    <Access accessible={props.value?.type === PointsGoodsType.充电优惠券}>
      <Access accessible={!props.value?.data}><a onClick={() => setChargeCouponOpen(true)}>添加充电优惠券</a></Access>
      <Access accessible={!!props.value?.data}>
        <Table
          rowKey={'id'}
          size="small"
          style={{width: 500}}
          columns={chargeCouponColumns}
          dataSource={props.value?.data ? [props.value.data] : []}
          pagination={false}
        />
      </Access>
    </Access>
    <Access accessible={props.value?.type === PointsGoodsType.商品}>
      <Access accessible={!props.value?.data}><a onClick={() => setGoodsOpen(true)}>添加商品</a></Access>
      <Access accessible={!!props.value?.data}>
        <Table
          rowKey={'goodsId'}
          size="small"
          style={{width: 500}}
          columns={goodsColumns}
          dataSource={props.value?.data ? [props.value.data] : []}
          pagination={false}
        />
      </Access>
    </Access>
    <CouponSelectModal
      open={chargeCouponOpen}
      onClose={onChargeCouponClose}
      initValue={props.value?.data ? [props.value?.data] : undefined}
      onSelect={onChargeCouponSelected}
      type='radio'
    />
    <GoodsCouponSelectModal
      type='radio'
      open={goodsCouponOpen}
      onClose={onGoodsCouponClose}
      initValue={props.value?.data ? [props.value?.data] : undefined}
      onSelect={onGoodsCouponSelected}
    />
    <SelectModal
      type='radio'
      open={goodsOpen}
      onClose={onGoodsClose}
      initValue={props.value?.data ? [props.value?.data] : undefined}
      onSelect={onGoodsSelected}
      target='stock'
    />
  </Flex>
}

export default GoodInfo
